<template>
  <div class="demo">
    <div class="demo-title">受控的预览</div>
    <div class="demo-content">
      <Button type="primary" @click="() => setVisible(true)">show image preview</Button>
      <Image
        :width="200"
        :style="{ display: 'none' }"
        :preview="{
          visible,
          onVisibleChange: setVisible,
        }"
        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Button from '@sscd/button';
  import Image from '@sscd/image';
  const visible = ref<boolean>(false);
  const setVisible = (value): void => {
    visible.value = value;
  };
</script>
